import {Button, Card, message, Modal, Image, Space, Typography, Row} from "antd";
import {useEffect, useState} from "react";
import {getAllCarts, order} from "../../apis/index.js";
import './index.less'
const {Text} = Typography;

const PayMent = () => {

    const gridStyle = {
        width: '25%',
        textAlign: 'center',
    };

    // 所有商品信息
    const [allProduct, setAllProduct] = useState(null);

    useEffect(() => {
        getAllCarts().then((res) => {
            console.log(res);
            if (res.code === '0000') {
                setAllProduct(res.data);
            } else {
                message.error('好像出错啦🤷‍♂️');
            }
        });
    }, []);

    // 二维码地址
    const [erweima,setErweima] = useState('')

    // 下单
    const handlerOrder = async (id) => {
        let res = await order(id)
        console.log(res)
        if (res.code === '0000'){
            setErweima(res.data)
            setIsModalOpen(true)
        }else {
            message.error('好像出错啦🤷‍♂️');
        }
    }

    const [isModalOpen, setIsModalOpen] = useState(false);

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    return (
        <>
            {/*二维码弹窗*/}
            <div className="myModal">
                <Modal  title="请扫描二维码付款" okText={'已付款'} cancelText={'取消'} onCancel={handleCancel} open={isModalOpen} maskClosable={true}>
                   <Row align={"middle"} justify={"center"}>
                       <Image
                           width={200}
                           src={erweima}
                       />
                   </Row>
                </Modal>

            </div>


            <Card title="所有商品">
                {allProduct && allProduct.map((item, index) => {
                    return <Card.Grid key={index} style={gridStyle}>
                        <Space size={"small"} direction={'vertical'}>
                            <Text strong>{item.productName}</Text>
                            <Text strong style={{
                                fontSize: 24
                            }}>{item.quota}
                                <Text>(条)</Text>
                            </Text>

                            <Text type="danger" strong>￥{item.price}.00</Text>

                            <Button type="primary" onClick={() => {
                                handlerOrder(item.productId)
                            }}>立即购买</Button>

                            <Text>
                                {item.productDesc}
                            </Text>
                        </Space>
                    </Card.Grid>;
                })}
            </Card>
        </>
    );
}

export default PayMent;
